<%@ page contentType="text/html;charset=UTF-8" import="java.util.*,com.hanma.bean.*" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>双蛋新闻主页</title>
	<script src="js/jquery-3.4.1.min.js"></script>
	<script src="home/js/jquery-3.4.1.min.js"></script>
	<link href="home/css/bootstrap.min.css" rel="stylesheet">
	<link href="home/css/main.css" rel="stylesheet">
	<!-- 字体图标css -->
	<link rel="stylesheet" href="home/font/iconfont.css">
	<!-- 引入网页标题图标 -->
	<link rel="shortcut icon" href="home/img/logo.jpg" type="image/x-icon">
</head>
<%
	Integer cateId = (Integer)request.getAttribute("cateId");
	Integer secateId = (Integer)request.getAttribute("secateId");
	String search = (String)request.getAttribute("search");
%>
<body>

<div class="navbar navbar-default">
	<div class="container">
		<div class="navbar-header">
			<a href="/message/list.do" class="navbar-brand"></a>
		</div>
		<label id="toggle-label" class="visible-xs-inline-block" for="toggle-checkbox">导航栏</label>
		<input class="hidden" id="toggle-checkbox" type="checkbox">
		<div class="hidden-xs">
			<ul class="navbar nav navbar-nav">
				<li>
					<a <%= cateId== 0 ? "class='list-group-item'":""%> href="/message/index.do?cateId=0">首页</a>
				</li>
				<%
					List<Category> cateList = (List<Category>) request.getAttribute("cateList");
					for (Category cat : cateList) {
				%>
				<li>
					<a <%= cateId==cat.getId() ? "class='list-group-item active'":""%> href="/message/index.do?cateId=<%=cat.getId()%>"><%= cat.getName()%></a>
				</li>
				<%
					}
				%>
			</ul>
			<ul class="nav navbar-nav navbar-right">
				<li>
					<div class="denglu">
						<span class="iconfont icon-denglu"></span>
						<a href="/message/login.do">登录</a>
					</div>
				</li>
				<li>
					<div class="zhuce">
						<span class="iconfont icon-zhuce"></span>
						<a href="/message/signup.do">注册</a>
					</div>
				</li>
			</ul>
		</div>
	</div>
</div>
<div class="container">
	<div class="row pt">
		<div class="col-sm-2">
			<div class="hidden-xs list-group side-bar">
				<%--						<a href="#" class="list-group-item active">综合</a>--%>
				<%
					List<Category> secateList = (List<Category>) request.getAttribute("secateList");
					for (Category secat : secateList) {
				%>
				<a <%= secateId==secat.getId() ? "class='list-group-item active'":""%>
						href="/message/index.do?secateId=<%=secat.getId()%>&cateId=<%=cateId%>" class="list-group-item"><%=secat.getName()%>
				</a>
				<%
					}
				%>
			</div>
		</div>
		<div class="col-sm-7">
			<div class="news-list" id="newsList">
				<%
					List<News> newsList = (List<News>) request.getAttribute("newsList");
					for (News news : newsList) {
				%>
				<div class="news-list-item clearfix">
					<div class="col-xs-5">
						<img src="/message/home/img/fff.png"/>
					</div>
					<div class="col-xs-7">
						<a href="newsSign.do?nid=<%=news.getId()%>" class="title"><%=news.getTitle()%></a>
						<div class="info">
							<span class="avatar"><img src="/message/home/img/logo.jpg">王花花</span>·
							<span><%=news.getComment()%>评论</span>
						</div>
					</div>
				</div>
				<%
					}
				%>
			</div>
			<button id="more" onclick="dianji()">加载更多</button>
		</div>

		<div class="col-sm-3">
			<form action="/message/index.do?cateId=<%=cateId%>&secateId=<%=secateId%>" method="post">
				<div class="search-bar">
					<div class="search">
						<input id="search" name="search" type="search" class="form-control" placeholder="搜索站内资讯、视频和用户">
					</div>
					<div class="search-btn">
						<button type="submit" class="button btn btn-default">搜索</button>
					</div>
				</div>
			</form>
			<div class="side-bar-card flag clearfix">
				<div class="col-xs-5">
					<img src="/message/home/img/inform.jpg"/>
				</div>
				<div class="col-xs-7">
					<div class="text-lg">有害信息举报专区</div>
					<div>举报电话：12377</div>
				</div>
			</div>

			<div class="side-bar-card">
				<div class="card-title">24小时热文</div>
				<%
					List<News> recList = (List<News>)request.getAttribute("recList");
					for (News news : recList){
				%>
				<div class="card-body">
					<div class="list">

						<div class="item">
							<div class="title"><a href="newsSign.do?nid=<%=news.getId()%>"><%=news.getTitle()%></a></div>
							<div class="desc"><%=news.getRecommend()%>阅读 <%=news.getComment()%>评论</div>
						</div>
					</div>
				</div>
				<%
					}
				%>
			</div>
		</div>
	</div>
</div>
<div id="footer">
	<div align="center">
		©2020 Baidu (京)-经营性-2017-0020京公网安备11000002000001号京ICP证030173号
	</div>
</div>

<%--		<script>--%>
<%--			$("#header").load("common/header.html", function() {--%>
<%--				$(".navbar li:first").addClass("active");--%>
<%--			});--%>
<%--			$("#footer").load("common/footer.html", function() {--%>
<%--				$("#footer div").addClass("footer");--%>
<%--			});--%>
<%--		</script>--%>

<script src="/message/home/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
	var page = 2;
	var loading = false;

	function dianji(){
		if (loading) return;
		loading = true;

		var cateId = <%=cateId%>;
		var seCateId = <%=secateId%>;
		var search = "<%=search%>";
		var url = "/message/getMore.do";
		var postDate = {
			cateId : cateId,
			seCateId : seCateId,
			search : search,
			page : ++page
		};
		$.get(url, postDate, function(date){
			var newsArr = date.newsList;
			if(newsArr.length == 0){
				$("#more").html("没有了");
			}
			for(let i = 0; i < newsArr.length; i++){
				$("#newsList").append('<div class="news-list-item clearfix ">'
						+'<div class="col-xs-5">'+'<img src="/message/home/img/fff.png" />'+ '</div>'
						+ '<div class="col-xs-7">'+'<a href="newsSign.do?nid='+newsArr[i].id+'" class="title">'
						+ newsArr[i].title +'</a>'+ '<div class="info">'+ '<span class="avatar">'+
						'<img src="/message/home/img/logo.jpg"></span>· '+'<span>'+'王花花'+'</span>·'+
						'<span>'+newsArr[i].comment+'评论'+'</span>'+ '</div>'+ '</div>'+ '</div>');
			}
			loading = false;
		}, "json");
	}
	$(window).scroll(function() {
		if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
			dianji();
		}
	});
</script>
</body>

</html>
